<template>
  <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="20rpx 20rpx 0 0" :is-mask-click="false">
    <view style="height: 75vh;position: relative;">
      <text class="iconfont icon-close fs-40 cfs-717171" style="position: absolute;right: 16rpx;top: 16rpx; z-index:1;"
        @click="close"></text>
      <view v-if="title" class="h-90 text-align-center fs-36 cfs-030000 fw-500" style="line-height:90rpx">{{ title }}</view>
      <scroll-view scroll-y style="height:100%">
        <view class="pl-32 pr-32" :class="title?'':'pt-54'">
          <view v-for="(item,index) in configuration" :key="index" class="mb-30">
            <view class="mb-32 fs-32 fw-500">{{ item.text }}</view>
            <view v-for="itemY in item.list" :key="itemY.id"
              class="inline-block pl-50 pr-50 pt-20 pb-20 mr-38 mb-20 border fs-26 cfs-030000"
              :style="[getStyle(itemY.id === item.active)]" @click="change(index, itemY.id)">
              {{ itemY.name }}
            </view>
          </view>
          <view class="flex f-row-nowrap f-jc-between f-ai-center">
            <view class="fs-32 fw-500">购买数量</view>
            <uni-number-box v-model="num" :min="0" />

          </view>
        </view>

      </scroll-view>

      <view class="h-100 cbg-fd6801 text-align-center cfs-fff fs-28"
        style="line-height: 100rpx;position: fixed;left: 0;right: 0;bottom: 0;" @click="addCart">加入购物车</view>
    </view>
  </uni-popup>
</template>
<script>
export default {
  name: 'configurationPopUpComp',
  props:{
    title:{
      type:String,
      default:''
    }
  },
  data() {

    return {
      configuration: {
        color: { text: '颜色', list: [{ name: '火焰红', id: 0 }, { name: '炭黑', id: 1 }, { name: '冰川蓝', id: 2 }, { name: '青春绿', id: 3 }], active: 0 },
        storage: { text: '容量', list: [{ name: '64GB', id: 0 }, { name: '128GB', id: 1 }, { name: '256GB', id: 2 }], active: 1 },
        menu: { text: '套餐', list: [{ name: '标配', id: 0 }, { name: '套餐一', id: 1 }, { name: '套餐二', id: 2 }], active: 0 },
      },
      num: 1

    }
  },
  methods: {
    open(type = 'bottom') {
      this.$refs.popup.open(type)
    },
    close() {
      this.$refs.popup.close()
    },
    getStyle(isActive) {
      if (isActive) return {
        color: '#fd6801',
        borderColor: '#fd6801'
      }
      return {}
    },
    change(type, currentId) {
      this.configuration[type].active = currentId
    },
    addCart(){
      this.close()
    }

  }
}
</script>
<style lang="scss"></style>
